<template>
	<!-- 通知 -->
	<view class="content" >
		<block v-for="(item, index) in mockList" :key="index">
			<view @click="gotodetail(index)" class="container">

				<view class="flex-row">
					<view class="flex-row1">
						<view class="blue-line"></view>
						<view class="title" >{{item.notice_title}}</view>
					</view>
					<view :class="{grid_r1_l1_top:item.is_top==1}"></view>
					<!-- <view class="read">已有{{item.browse_num}}人阅读</view> -->
				</view>
				<view class="flex-row flex-row2">
					<view class="read">发布时间：{{item.crate_time}}</view>
					<view class="read2">已有{{item.browse_num}}人阅读</view>
				</view>
			<!-- 	<view class="flex-row3">{{item.notice_text}}</view> -->

			</view>
		</block>
		<view :class="{is_show:isshow}" class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
	import cDate from '@/common/util.js';
	export default {
		data() {
			return {
				groupid: "",
				mockList: [],
				isshow: true,
				loadingText: '加载中...',
				page: 1,
				timer: null
			};
		},
		onLoad: function() {
			this.getList(1,10);
		},
		onPullDownRefresh: function() {
			this.getList(1, 10);
			this.page=1;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			var _this = this;
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
			this.isshow = false;
			this.loadingText = '加载中...';
			this.timer = setTimeout(function() {
				_this.page = _this.page + 1;
				_this.getData(_this.page, 8);
			}, 1000);
		},
		methods: {
			getList:function(page,pagesize){
			var token = uni.getStorageSync('token');
			this.$gapi.apiPost('user/app/listsNotice', {
				"k_token": token,
				"page":page,
				"pagesize":pagesize,
				"type": 3
			}).then(res => {
				if (res.data.code == 200) {
					this.mockList = res.data.data.data;
					for (let i = 0; i < this.mockList.length; i++) {
						this.mockList[i].crate_time=cDate.getFormatTime(this.mockList[i].crate_time);
					}
				}
			});
				
			},
			getData:function(page,pagesize){
				var _this = this;
			var token = uni.getStorageSync('token');
			this.$gapi.apiPost('user/app/listsNotice', {
				"k_token": token,
				"page":page,
				"pagesize":pagesize,
				"type": 3
			}).then(res => {
				if (res.data.code == 200) {
					this.mockList = this.mockList.concat(res.data.data.data);
					var len = this.mockList.length;
					this.mockList.splice(len);
					
				} else if (res.data.code == 400) {
					
					this.loadingText = '已加载全部';
					this.timer = setTimeout(function() {
						_this.isshow = true;
					}, 1000);
				}
			});
				
			},
			gotodetail: function(index) {
				uni.navigateTo({
					url: 'inform-details?data=' + encodeURIComponent(JSON.stringify(this.mockList[index]))
				})
			}
		}


	}
</script>

<style scoped>
	.is_show {
		display: none;
	}
	.loading {
		width: 100%;
		text-align: center;
		line-height: 80px;
	}
	.content {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #eeeeee;
	}
	.title{
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 32upx !important;
	}
	.container {
		height: auto;
		background-color: #ffffff;
		padding-top: 9upx;
		margin-bottom: 20upx;
	}

	.blue-line {
		
		width: 4upx;
		height: 40upx;
		background: #00adff;
		margin-right: 20upx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-row1 {
		width: 564upx;
		height: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20upx;
		margin-top: 10upx;
		font-size: 34upx;
		color: #333333;
	}

	.grid_r1_l1_top:after {
		margin-top:10rpx;
		content: "【置顶】";
		display: inline-block;
		font-size: 26upx;
		color: #f10000;
	}

	.read {
		font-size: 30upx;
		color: #999999;
	}

	.read2 {
		font-size: 30upx;
		color: #999999;
		margin-right: 30upx;
	}

	.flex-row2 {
		width: 710upx;
		height: 62upx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 20upx;
		font-size: 30upx;
		color: #999999;
		/* border-bottom: 1px solid #e5e5e5; */
	}

	.flex-row3 {
		width: 90%;
		height: auto;
		/* display: flex;
		flex-direction: row;
		align-items: center; */
		margin-left: 20upx;
		font-size: 26upx;
		color: #666666;
		padding-top: 10upx;
		padding-bottom: 10upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>

